<template>
  <div class="login">
    <h6>您好，请登录</h6>
    <p></p>
    <div class="input-field">
      <van-cell>
        <i class="iconfont iconbianzu1"></i>
        <van-field v-model="mobile" placeholder="请输入手机号"> </van-field>
      </van-cell>
      <van-cell>
        <i class="iconfont iconyanzhengma"></i>
        <van-field v-model="code" center placeholder="请输入验证码">
          <template #button>
            <span class="code-button">获取验证码</span>
          </template>
        </van-field>
      </van-cell>
      <div class="agreement">
        登录即同意<span>《用户使用协议》</span>和<span>《隐私协议》</span>
      </div>
    </div>
    <van-button class="submit" round type="danger">确定</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mobile: "",
      code: "",
    };
  },
};
</script>

<style lang="scss">
.login {
  padding: 20px;
  h6 {
    font-size: 18px;
    margin-top: 80px;
  }
  .input-field {
    margin-top: 70px;
  }
  .van-cell__value {
    display: flex;
    align-items: center;
    height: 30px;
    .code-button {
      color: #00b8d4;
    }
  }
  .agreement {
    font-size: 12px;
    span {
      color: #00b8d4;
      line-height: 48px;
    }
  }
  .submit {
    width: 100%;
    margin-top: 30px;
  }
}
</style>